<template>
  <div class="search_container">
    <!--导航栏-->
    <van-row class="navBar">
      <van-col span="2" class="leftIcon" @click="$router.go(-1)">
        <van-icon name="arrow-left" class="icon"/>
      </van-col>
      <van-col span="16" class="center">
        <van-icon name="search" class="search"/>
        <input type="text" class="inputItem" placeholder="请输入搜索关键词" v-model="searchValue"/>
      </van-col>
      <van-col span="6" class="rightBtn">
        <van-button @click="onSearch" type="info" size="small" class="searchBtn">搜索</van-button>
      </van-col>
    </van-row>

    <!--结果不存在-->
    <div class="no-result" v-if="searchData.length<=0">暂无结果 ~~</div>

    <!--结果存在-->
    <div class="have_result" v-else>
      <van-card v-for="item in searchData" :desc="item.description" :thumb="item.imageUrl" class="resultItem"
                @click="showGood(item.id)">
        <template #title>
          <p class="title">{{ item.title }}</p>
        </template>
        <template #price>
          <span class="price_container">
            <span class="salePrice">{{ item.salePrice | formatMoney }}</span>
            <del class="price">原价：{{ item.price  | formatMoney }}</del>
          </span>
        </template>
      </van-card>
    </div>

  </div>
</template>

<script>

import filter from "@/filters/filter";

export default {

  data() {
    return {
      searchValue: "",
      searchData: []
    };
  },

  created() {
    if (localStorage.getItem("search")) {
      this.getSearchData();
    }
  },

  methods: {
    async getSearchData() {
      this.searchValue = localStorage.getItem("search");
      let res = await this.$axios.post(this.$api.searchBook, {name: this.searchValue});
      if (res.status === 200 && res.data.code === 200) {
        this.searchData = res.data.data;
      } else {
        this.$toast.fail("搜索失败");
      }
    },
    // 跳转商品详情
    showGood(bookId) {
      this.$router.push({path: "/goodsDetail", query: {bookId: bookId}});
    },

    onSearch() {
      localStorage.setItem("search", this.searchValue);
      if (this.searchValue === '') {
        this.searchData = [];
        return false;
      }
      this.getSearchData();
    },
  },

  filters: {
    formatMoney(money) {
      return filter.moneyFormat(money);
    }
  }
};

</script>
<style lang="less" scoped>
.search_container {

  .navBar {
    height: 2.8rem;
    padding: 0.4rem .5rem;
    box-sizing: border-box;

    .leftIcon {
      height: 100%;
      text-align: center;

      .icon {
        margin-top: 65%;
        transform: translateY(-50%);
      }
    }

    .center {
      position: relative;
      box-sizing: border-box;
      height: 100%;

      .inputItem {
        background-color: #f5f5f5;
        padding: 0;
        padding-left: 1.5rem;
        margin: 0;
        height: 100%;
        width: 100%;
        border: none;
        font-size: .7rem;
      }

      .search {
        position: absolute;
        top: 50%;
        left: .4rem;
        transform: translateY(-50%);
      }
    }

    .rightBtn {
      height: 100%;

      .searchBtn {
        margin-top: .2rem;
        margin-left: 50%;
      }
    }
  }

  .have_result {
    padding: .3rem .5rem;
    height: 20rem;

    .resultItem {
      box-shadow: 0 0 5px #eee;
      margin-bottom: .7rem;

      .title {
        font-size: 1rem;
        margin: 0 0 .3rem 0;
      }

      .price_container {
        .salePrice {
          margin-right: .5rem;
          font-size: 1rem;
          color: #786AE4;
        }
      }
    }
  }

  .no-result {
    text-align: center;
    font-size: 14px;
    color: #666;
    margin-top: 10px;
  }
}
</style>
